<template>
    <div id="LiveGetleandiet">
        <div class="n_div1">
            <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="">
                    <el-input v-model="formInline.user" placeholder="请输入菜名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button type="primary" @click="onReset">重置</el-button>
                    <el-button type="primary" @click="dialogFormVisible1 = true">添加菜谱</el-button>
                    <el-button type="primary" @click="checkBut">查看更多</el-button>

                </el-form-item>
            </el-form>
            <el-table :data="glptableData2" border style="width:1000px">
                <el-table-column prop="type" label="类别" align="center">
                </el-table-column>
                <el-table-column prop="name" label="菜品名称" align="center">
                    <!-- <img src="../assets/image/glp/ert1.jpg" alt="" class="w_img1"><span>111</span> -->
                </el-table-column>
                <el-table-column prop="val" label="脂肪" align="center">
                </el-table-column>
                <el-table-column prop="material" label="材料" align="center">
                </el-table-column>
                <el-table-column prop="way" label="做法" align="center">
                </el-table-column>
                <el-table-column prop="" label="操作" align="center">
                    <template slot-scope="scope">
                        <!-- <button class="c_edit" @click="dialogFormVisible = true">修改</button> -->
                        <button class="n_edit" @click="editButton(scope.row)">修改</button>
                        <!-- //dialogFormVisible = true -->

                        <el-popconfirm @confirm="del(scope.row)" title="确定删除该条账单吗？">
                            <el-button type="text" slot="reference" class="del">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
            :page-sizes="[5, 9, 15]" layout="total, sizes, prev, pager, next, jumper" :total="pageData1"
            class="clearfix">
        </el-pagination>
        <div class="g_div2">
            <el-dialog title="添加菜单" :visible.sync="dialogFormVisible1">
                <el-form :model="addData">
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="addData.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜名" :label-width="formLabelWidth">
                        <el-input v-model="addData.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="脂肪" :label-width="formLabelWidth">
                        <el-input v-model="addData.val" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="材料" :label-width="formLabelWidth">
                        <el-input v-model="addData.material" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="做法" :label-width="formLabelWidth">
                        <el-input v-model="addData.way" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                    <el-button type="primary" @click="addSure">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog title="修改菜谱" :visible.sync="dialogFormVisible">
                <el-form :model="editData">
                    <el-form-item label="类别" :label-width="formLabelWidth">
                        <el-input v-model="editData.type" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="菜名" :label-width="formLabelWidth">
                        <el-input v-model="editData.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="脂肪" :label-width="formLabelWidth">
                        <el-input v-model="editData.val" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="材料" :label-width="formLabelWidth">
                        <el-input v-model="editData.material" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="做法" :label-width="formLabelWidth">
                        <el-input v-model="editData.way" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="editSure()">确 定</el-button>
                </div>
            </el-dialog>
        </div>

    </div>
</template>
<style lang="less" >
#LiveGetleandiet {
    margin: auto;
    width: 1000px;

    .n_h2 {
        font-weight: 600;
        font-family: "楷体";
        font-size: 30px;
        color: rgb(165, 2, 2);
    }

    .n_div1 {
        // width: 1000px;
        margin: auto;

        .el-form {
            margin-left: 40px;
            margin-top: 30px;
            text-align: left;

            .el-input {
                width: 250px;
            }
        }

        .el-button--primary {
            background-color: rgb(255, 233, 192);
            color: rgba(00, 00, 00, 0.8);
            border-color: rgb(255, 233, 192);
        }

        .el-button--primary:hover {
            background-color: rgba(255, 233, 192, 0.8);
            color: rgba(00, 00, 00, 0.5);
            border-color: rgba(255, 233, 192, 0.8);
        }

        .el-table {
            margin: 0 auto;
            margin-left: 40px;

            .del {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
            }
            .n_check {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
            }
            .n_edit {
                border: 0;
                background-color: rgba(255, 255, 255, 0.0) !important;
                color: #409EFF;
            }

            .check {
                border: 0;
                background-color: white;
                color: #409EFF;
            }

        }
    }

    .g_div2 {
        .el-dialog {
            width: 500px;
            height: 500px;
        }

    }

    .el-pagination {
        float: right;
        margin-top: 30px;
    }

    .clearfix:after {
        visibility: hidden;
        display: block;
        content: " ";
        clear: both;

    }
}
</style>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            glptableData2: [],
            editData: {
                id: '',
                type: '',
                name: '',
                val: '',
                material: '',
                way: ''
            },
            addData: {
                id: '',
                type: '',
                name: '',
                val: '',
                material: '',
                way: ''
            },
            pageData: [],
            count: 5,
            page: 1,
            delid: 0,
            pageData1:1,
            dialogFormVisible: false,
            dialogFormVisible1: false,
            dialogVisible: false,
            addmenu: false,
            currentPage4: 1,
            editid: 0,
            formInline: {
                user: '',
            },
            form: {
                name: '',
                region: '',
                // dialogFormVisible: false,
            },
            formLabelWidth: '50px'
        }


    },
    methods: {
        handleSizeChange(val) {
            this.count = val
            this.glptableData2 = this.pageData.slice(0, this.count)
        },
        handleCurrentChange(val) {
            this.currentPage4=val;
            this.glptableData2 = this.pageData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count)
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        //搜索
        onSubmit() {
            axios({
                url: '/dbdata/glptableData2?q=' + this.formInline.user,

            }).then(({ data }) => {
                this.pageData = data;
                this.pageData1=this.pageData.length
                this.glptableData2 = this.pageData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);
                this.formInline.user = '';

            })
            console.log('submit!');
        },
        //重置
        onReset() {
            this.page = 1;
            this.formInline.user=''
            this.render();
        },
        render() {
            axios({
                url: '/dbdata/glptableData2/'
            }).then(({ data }) => {
                this.pageData = data;
                this.pageData1=this.pageData.length
                this.glptableData2 = this.pageData.slice((this.currentPage4 - 1) * this.count, this.currentPage4 * this.count);

            })
        },
        editButton(v) {
            this.dialogFormVisible = true;
            this.editid = v.id,
                this.editData = {
                    id: v.id,
                    type: v.type,
                    name: v.name,
                    val: v.val,
                    material: v.material,
                    way: v.way
                }
        },
        editSure() {
            let str = '/dbdata/glptableData2/' + this.editid
            axios({
                url: str,
                method: 'patch',
                data: this.editData
            }).then(() => {
                this.dialogFormVisible = false
                this.$message.success('修改成功');
                this.render();

            })
        },
        addSure() {
            axios({
                url: '/dbdata/glptableData2/',
                method: 'post',
                data: this.addData
            }).then(({ data }) => {
                console.log(data);
                this.dialogFormVisible1 = false
                this.$message.success('添加成功');
                this.render();
            })
        },
        del(row) {
            // let str =  + this.delid
            axios({
                url: '/dbdata/glptableData2/' + row.id,
                method: 'delete',
            }).then(({ data }) => {
                this.pageData = data;
                if (Math.ceil((this.pageData.length - 1) / this.count) < this.currentPage4) {
                    this.currentPage4--
                }
                this.$message.success('删除成功')
                this.render();

            })
        },
        checkBut(v){
            // this.$router.push('/HappyHome/live/Fatdetails');
            this.$router.push({path:'/HappyHome/live/Fatdetails',query:{data:this.pageData}})
            
        }
    },
    mounted() {
        this.render();
    }

}

</script>